@import "m_reset.scss";
@import url(http://at.alicdn.com/t/c/font_3634078_lvl2fuitd6o.css);

@function getvw($w){
    @return ($w  /750)*100 + vw
}
.wrap{
    header{
        nav{
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding-top: getvw(20);
            .product{
                width: getvw(123);
                height: getvw(57);
                background-color:white ;
                border-radius: 10px;
                border: 1px solid #ff9344;
                font-size: getvw(30);
            }
            p{
                font-size: getvw(30);
            }
            i{
                color: #ff9344;
                font-size: getvw(30);
            }
        }
        @keyframes move {
            0%{
                transform: translate(0px);
            }
            50%{
                transform: translate(-375px);
            }
            100%{
                transform: translate(0px);
            }
        }
        .slideshow{
            overflow: hidden;
            width: 100%;
            ul{
                padding: 0;
                display: flex;
                width: 200%;
                animation: move 3s infinite;
                li{
                    width: 100%;
                    height:getvw(287) ;
                    img{
                        width: 100%;
                        display: block;
                    }
                }
            }
        }
    }
    main{
        .price{
            display: flex;
            justify-content: space-between;
            padding-top: getvw(36);
            p{
                font-size: getvw(50);
                color: #ff9344;
                padding-left: getvw(45);
            }
            .buy{
                width: getvw(111);
                height: getvw(59);
                background-color: #ff9344;
                color: white;
                border-radius: 10px;
                margin-right: getvw(40);
            }
        }
        .evaluate{
            display: flex;
            justify-content: space-between;
            padding-top: getvw(30);
            p{
                font-size: getvw(30);
                padding-left: getvw(45);
                i{
                    font-size: getvw(30);
                    color: #ff9344;
                }
                span{
                    font-size: getvw(30);
                    color: #ff9344;
                }
            }
            p:nth-of-type(2){
                font-size: getvw(30);
                font-weight: lighter;
                padding-right: getvw(40);
            }
        }
        .box{
            display: flex;
            flex-direction: column;
            align-items: center;
            .apply{
                width: getvw(665);
                height: getvw(65);
                background-color: #ff9344;
                display: flex;
                justify-content: space-between;
                margin-top: getvw(40);
                p{
                    color: white;
                    font-size: getvw(45);
                }
            }
            .shop{
                display: flex;
                justify-content: space-between;
                width: getvw(665);
                padding-top: getvw(20);
                .print{
                    width: getvw(177);
                    height: getvw(176);
                }
                .details{
                    p{
                        font-weight: lighter;
                        line-height: getvw(45);
                        width: getvw(350);
                        i{
                            color: #ff9344;
                            font-size: getvw(30);
                        }
                    }
                    p:nth-of-type(1){
                        font-size: getvw(30);
                        font-weight: bold;
                    }
                    p:nth-of-type(4){
                        color: #ff9344;
                        font-size: getvw(25);
                    }
                }
                .access{
                    display: flex;
                    flex-direction: column;
                    align-self: center;
                    button{
                        width: getvw(111);
                        height: getvw(59);
                        background-color: #ff9344;
                        border-radius: 10px;
                        color: white;
                    }
                }
            }
        }
    }
    footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        .nav{
            ul{
                width: 100%;
                display: flex;
                justify-content: space-evenly;
                li{
                    i{
                        color: #ff9344;
                        font-size: getvw(50);
                    }
                    
                    p{
                        color: #000;
                        font-size: getvw(30);
                    }
                }
            }
        }
    }
}